<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.准备一个效果</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<div>
				<h2>人员信息</h2>
				<h3>人员姓名：{{pname}}</h3>
				<h3>人员年龄：{{age}}</h3>
				<button @click="showPersonInfo">点我提示人员信息</button>
			</div>
			<hr>
			<div>
				<h2>学校信息</h2>
				<h3>学校名称：{{sname}}</h3>
				<h3>学校地址：{{address}}</h3>
				<button @click="showSchoolInfo">点我提示学校信息</button>
			</div>
		</div>

		<script type="text/javascript">
			new Vue({
				el:'#demo',
				data:{
					pname:'老刘',
					age:80,
					sname:'尚硅谷',
					address:'宏福科技园'
				},
				methods:{
					showPersonInfo(){
						alert(this.pname + '-' + this.age)
					},
					showSchoolInfo(){
						alert(this.sname + '-' + this.address)
					}
				}
			})
		</script>
	</body>
</html>